import Vue from 'vue'
import Vuex from 'vuex'
import {
  MessageBox,
  Message
} from 'element-ui'
Vue.use(Vuex)

function deepCopy(p, c) {
  var c = c || {};
  for (var i in p) {
    if (typeof p[i] === 'object' && p[i] !== null) {
      c[i] = (p[i].constructor === Array) ? [] : {};
      deepCopy(p[i], c[i]);
    } else {
      c[i] = p[i];
    }
  }
  return c;
}


export default new Vuex.Store({
  state: {
    parameters: {},
    templateList: [],
    modLists: [],
    container: {},
    pageConfig: {},
    olddata: {
      pageConfig: {},
      container: {}
    },
    nowchose: '',
    setmod: 'chosetheme',
    setindex: -1,
    loading: false,
    allloading: false
  },
  mutations: {
    setParameters(state, tList) {
      state.parameters = tList;
    },
    setTemplateList(state, tList) {
      state.templateList = tList;
    },
    setmodLists(state, tList) {
      state.modLists = tList;
    },
    setSiteData(state, Site) {
      state.container = JSON.parse(Site.Config).container;
      state.pageConfig = JSON.parse(Site.Config).pageConfig;
    },
    setContainer(state, data) {
      state.container = data;
    },
    setModConfig(state, payload) {
      state.container.items[payload.index].config[payload.key] = payload.value;
    },
    setModBelong(state, payload) {
      state.container.items[payload.index][payload.key] = payload.value;
    },
    setThemeConfig(state, payload) {
      state.pageConfig[payload.theme][payload.key] = payload.value;
    },
    setPageConfig(state, payload) {
      state.pageConfig[payload.key] = payload.value;
    },
    changeTheme(state, name) {
      state.pageConfig.theme = name;
    },
    setLoading(state, n) {
      state.loading = n;
    },
    setAllloading(state, n) {
      state.allloading = n;
    },
    setSetmod(state, n) {
      state.setmod = n;
    },
    setNowchose(state, n) {
      state.nowchose = n;
    },
    delMod(state, i) {
      state.container.items.splice(i, 1);
    },
    showsetbox(state, payload) {
      state.olddata.pageConfig = deepCopy(state.pageConfig);
      state.olddata.container = deepCopy(state.container);
      state.setindex = payload.index;
      state.setmod = payload.setMod;
    },
    addMod(state, item) {
      if (!item.repeatadd) {
        for (var i = 0; i < state.container.items.length; i++) {
          if (state.container.items[i].id == item.id) {
            return false
          }
        }
      }
      state.olddata.pageConfig = deepCopy(state.pageConfig);
      state.olddata.container = deepCopy(state.container);
      state.container.items.push(deepCopy(item));
      Vue.nextTick(function () {
        document.getElementById('contentbox').scrollTop = document.getElementById('contentbox').scrollHeight;
      })
      state.setmod = item.setMod;
      state.setindex = state.container.items.length - 1;
    },
    cancelEdit(state) {
      state.pageConfig = deepCopy(state.olddata.pageConfig);
      state.container = deepCopy(state.olddata.container);
      state.setmod = 'addmod';
    }
  },
  actions: {
    save(context) {
      $.ajax("/Template/Design/UpdateSite", {
        type: "post",
        contentType: "application/json",
        headers: {
          ISGZIPDATA: "0"
        },
        data: JSON.stringify({
          siteId: Parameters.siteId,
          config: JSON.stringify({
            pageConfig: context.state.pageConfig,
            container: context.state.container
          })
        }),
        beforeSend: function () {
          context.commit('setLoading', true);
        },
        success: function (data) {
          context.commit('setLoading', false);
          if ((context.state.setmod != 'modsort') && (context.state.setmod != 'chosetheme')) {
            context.commit('setSetmod', 'addmod');
            // context.state.setmod = 'addmod';
          }
        },
        error: function (err) {
          context.commit('setLoading', false);
          console.log(err)
        }
      });
    },
    deleteMod(context, i) {
      MessageBox.confirm('此操作将删除该模块, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        context.commit('delMod', i);
        $.ajax("/Template/Design/UpdateSite", {
          type: "post",
          contentType: "application/json",
          headers: {
            ISGZIPDATA: "0"
          },
          data: JSON.stringify({
            siteId: Parameters.siteId,
            config: JSON.stringify({
              pageConfig: context.state.pageConfig,
              container: context.state.container
            })
          }),
          beforeSend: function () {
            context.commit('setLoading', true);
          },
          success: function (data) {
            context.commit('setLoading', false);
            if ((context.state.setmod != 'modsort') && (context.state.setmod != 'chosetheme')) {
              context.commit('setSetmod', 'addmod');
              // context.state.setmod = 'addmod';
            }
            Message({
              type: 'success',
              message: '删除成功!',
              duration: 2000
            });
          },
          error: function (err) {
            Message({
              type: 'error',
              message: '出错了!删除失败',
              duration: 2000
            });
          }
        });
      }).catch(() => {
        Message({
          type: 'info',
          message: '已取消删除',
          duration: 2000
        });
      })
    }
  },
  getters: {

  }
})